<template>
    <div class="entity-init">
        <h3>Entity初始化</h3>
        <div class="entity-info">
            <p><strong>说明：</strong>使用Cesium原生代码创建Entity实体对象</p>
            <p>通过以下方式获取Cesium原生Viewer实例：</p>
            <pre class="code-block">
const viewer = xbsjEarthUi.activeViewer?.innerViewer?.viewer;
            </pre>
        </div>
        <div class="entity-controls">
            <button @click="addCircle" class="circle-btn">创建圆形</button>
            <button @click="addRectangle" class="rect-btn">创建矩形</button>
            <button @click="removeAllEntities" class="remove-btn">移除所有Entity</button>
        </div>
        <div class="entity-details">
            <p><strong>圆形参数：</strong></p>
            <p>位置: 118.3074532634854, 32.296582143949365, 25.2940467368166</p>
            <p>半径: 50米</p>
            <p>颜色: 红色边框，黄色填充</p>
            <p><strong>矩形参数：</strong></p>
            <p>位置: 圆形旁边</p>
            <p>尺寸: 20×40米</p>
            <p>颜色: 红色边框，黄色填充</p>
        </div>
        <div class="entity-status">
            <p>圆形状态: <span :class="circleStatusClass">{{ circleStatus }}</span></p>
            <p>矩形状态: <span :class="rectangleStatusClass">{{ rectangleStatus }}</span></p>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, inject, onMounted } from 'vue';
import { XbsjEarthUi } from '../../../../scripts/xbsjEarthUi';

const xbsjEarthUi = inject('xbsjEarthUi') as XbsjEarthUi;
const circleStatus = ref('未创建');
const circleStatusClass = ref('status-unknown');
const rectangleStatus = ref('未创建');
const rectangleStatusClass = ref('status-unknown');
let circleEntity: any = null;
let rectangleEntity: any = null;

// 获取Cesium原生Viewer实例
const getCesiumViewer = () => {
    return xbsjEarthUi.activeViewer?.innerViewer?.viewer as any;
};

const addCircle = () => {
    const viewer = getCesiumViewer();
    if (!viewer) {
        console.error('Cesium Viewer不可用');
        circleStatus.value = 'Viewer不可用';
        circleStatusClass.value = 'status-error';
        return;
    }
    // TODO 创建圆，并添加到viwer中。(使用Cesium原生代码创建圆形Entity)
    try {
        // 如果已经存在，先移除
        if (circleEntity) {
            removeCircle();
        }

        circleStatus.value = '创建中...';
        circleStatusClass.value = 'status-loading';

        // 使用Cesium原生代码创建圆形Entity
        circleEntity = viewer.entities.add({
            position: (window as any).Cesium.Cartesian3.fromDegrees(118.3074532634854, 32.296582143949365, 25.2940467368166),
            ellipse: {
                semiMinorAxis: 50, // 半径50米
                semiMajorAxis: 50,
                material: (window as any).Cesium.Color.YELLOW.withAlpha(0.7), // 黄色填充
                outline: true,
                outlineColor: (window as any).Cesium.Color.RED, // 红色边框
                outlineWidth: 2,
                height: 25.2940467368166
            }
        });

        circleStatus.value = '创建成功';
        circleStatusClass.value = 'status-success';
        console.log('圆形Entity创建成功');

        // 飞行到圆形位置
        // viewer.camera.flyTo({
        //     destination: (window as any).Cesium.Cartesian3.fromDegrees(118.3074532634854, 32.296582143949365, 100),
        //     duration: 2.0
        // });

    } catch (error) {
        console.error('创建圆形Entity失败:', error);
        circleStatus.value = '创建失败';
        circleStatusClass.value = 'status-error';
    }
};

const addRectangle = () => {
    const viewer = getCesiumViewer();
    if (!viewer) {
        console.error('Cesium Viewer不可用');
        rectangleStatus.value = 'Viewer不可用';
        rectangleStatusClass.value = 'status-error';
        return;
    }

    // TODO 创建矩形，并添加到viwer中。(使用Cesium原生代码创建矩形Entity)
    try {
        // 如果已经存在，先移除
        if (rectangleEntity) {
            removeRectangle();
        }

        rectangleStatus.value = '创建中...';
        rectangleStatusClass.value = 'status-loading';

        // 计算矩形位置（在圆形旁边）
        const centerLon = 118.3074532634854;
        const centerLat = 32.296582143949365;
        const centerHeight = 25.2940467368166;
        
        // 矩形中心位置（向东偏移约60米）
        const rectLon = centerLon + 0.0005; // 大约60米的经度偏移
        const rectLat = centerLat;

        // 使用Cesium原生代码创建矩形Entity
        rectangleEntity = viewer.entities.add({
            position: (window as any).Cesium.Cartesian3.fromDegrees(rectLon, rectLat, centerHeight),
            rectangle: {
                coordinates: (window as any).Cesium.Rectangle.fromDegrees(
                    rectLon - 0.0001, // 西边界（约20米）
                    rectLat - 0.0002, // 南边界（约40米）
                    rectLon + 0.0001, // 东边界（约20米）
                    rectLat + 0.0002  // 北边界（约40米）
                ),
                material: (window as any).Cesium.Color.YELLOW.withAlpha(0.7), // 黄色填充
                outline: true,
                outlineColor: (window as any).Cesium.Color.RED, // 红色边框
                outlineWidth: 2,
                height: centerHeight
            }
        });

        rectangleStatus.value = '创建成功';
        rectangleStatusClass.value = 'status-success';
        console.log('矩形Entity创建成功');

        // 飞行到矩形位置
        // viewer.camera.flyTo({
        //     destination: (window as any).Cesium.Cartesian3.fromDegrees(rectLon, rectLat, 100),
        //     duration: 2.0
        // });

    } catch (error) {
        console.error('创建矩形Entity失败:', error);
        rectangleStatus.value = '创建失败';
        rectangleStatusClass.value = 'status-error';
    }
};

const removeCircle = () => {
    const viewer = getCesiumViewer();
    if (viewer && circleEntity) {
        try {
            viewer.entities.remove(circleEntity);
            circleEntity = null;
            circleStatus.value = '已移除';
            circleStatusClass.value = 'status-removed';
            console.log('圆形Entity已移除');
        } catch (error) {
            console.error('移除圆形Entity失败:', error);
            circleStatus.value = '移除失败';
            circleStatusClass.value = 'status-error';
        }
    }
};

const removeRectangle = () => {
    const viewer = getCesiumViewer();
    if (viewer && rectangleEntity) {
        try {
            viewer.entities.remove(rectangleEntity);
            rectangleEntity = null;
            rectangleStatus.value = '已移除';
            rectangleStatusClass.value = 'status-removed';
            console.log('矩形Entity已移除');
        } catch (error) {
            console.error('移除矩形Entity失败:', error);
            rectangleStatus.value = '移除失败';
            rectangleStatusClass.value = 'status-error';
        }
    }
};

const removeAllEntities = () => {
    removeCircle();
    removeRectangle();
};

onMounted(() => {
    // 组件加载时检查Viewer状态
    const viewer = getCesiumViewer();
    if (viewer) {
        circleStatus.value = '就绪';
        circleStatusClass.value = 'status-ready';
        rectangleStatus.value = '就绪';
        rectangleStatusClass.value = 'status-ready';
    } else {
        circleStatus.value = 'Viewer不可用';
        circleStatusClass.value = 'status-error';
        rectangleStatus.value = 'Viewer不可用';
        rectangleStatusClass.value = 'status-error';
    }
});
</script>

<style scoped>
.entity-init {
    width: 280px;
    box-sizing: border-box;
    padding: 10px;
}

.entity-info {
    padding: 10px;
    background-color: #000000;
    border-radius: 4px;
    margin-bottom: 15px;
    font-size: 14px;
}

.code-block {
    background-color: #2d3748;
    color: #e2e8f0;
    padding: 10px;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    overflow-x: auto;
    margin: 10px 0;
}

.entity-controls {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 15px;
}

.circle-btn, .rect-btn, .remove-btn {
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    width: 100%;
}

.circle-btn {
    background-color: #4CAF50;
    color: white;
}

.circle-btn:hover {
    background-color: #45a049;
}

.rect-btn {
    background-color: #2196F3;
    color: white;
}

.rect-btn:hover {
    background-color: #1976D2;
}

.remove-btn {
    background-color: #f44336;
    color: white;
}

.remove-btn:hover {
    background-color: #da190b;
}

.entity-details {
    padding: 10px;
    background-color: #000000;
    border-radius: 4px;
    margin-bottom: 15px;
    font-size: 14px;
    overflow: auto;
}

.entity-status {
    padding: 10px;
    background-color: #000000;
    border-radius: 4px;
    border-left: 4px solid #dee2e6;
    font-size: 14px;
}

.status-unknown {
    color: #6c757d;
}

.status-ready {
    color: #17a2b8;
    font-weight: bold;
}

.status-loading {
    color: #ffc107;
    font-weight: bold;
}

.status-success {
    color: #28a745;
    font-weight: bold;
}

.status-error {
    color: #dc3545;
    font-weight: bold;
}

.status-removed {
    color: #6c757d;
    font-weight: bold;
}
</style>
